<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.天气案例_立即监视</title>
		<style>
			img{
				width: 100px;	
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			立即监视：
						1.配置：immediate:true
						2.作用：可以让数据没有发生变化时，Vue初次工作时就执行一次监视的回调
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>今天天气很{{info}}</h1>
			<button @click="changeWeather">切换天气</button> <br>
			<img :src="url">
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#demo',
			data:{
				isHot:true,
				url:'https://s3.ax1x.com/2020/12/13/reC1IA.jpg'
			},
			computed: {
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					immediate:true,
					handler(newValue,oldValue){
						console.log('isHot的值发生变化了~~~',newValue,oldValue)
						if(newValue) this.url = 'https://s3.ax1x.com/2020/12/13/reC1IA.jpg'
						else this.url = 'https://s3.ax1x.com/2020/12/13/reCaqg.jpg'
					}
				}
			}
		})
		//如下的这种监视写法，了解即可，用的不多
		/* vm.$watch('isHot',{
			handler(newValue,oldValue){
				console.log('isHot的值发生变化了~~~',newValue,oldValue)
				if(newValue) this.url = 'https://s3.ax1x.com/2020/12/13/reC1IA.jpg'
				else this.url = 'https://s3.ax1x.com/2020/12/13/reCaqg.jpg'
			}
		}) */
	</script>
</html>